<template>
  <view class="order_details">
    <public-loading></public-loading>
    <z-nav-bar id="nav" bgColor="#ffffff" title="订单详情"></z-nav-bar>
    <view class="order_info_wrap mgt-24">
      <view class="order_info_box df justify-between item-bottom-border">
        <view class="order_info_left">订单编号</view>
        <view class="order_no">{{orderInfo.orderId}}</view>
      </view>
      <view class="order_info_box df justify-between">
        <view class="order_info_left">下单时间</view>
        <view class="order_no">{{orderInfo.createTime}}</view>
      </view>
    </view>
    <view class="order_info_wrap mgt-24">
      <view class="order_info_box df justify-between item-bottom-border">
        <view class="order_info_left">
          订单状态</view>
        <view class="order_no" v-if="orderInfo.orderStatus===10">待支付</view>
        <view class="order_no" v-if="orderInfo.orderStatus===20">待完成</view>
        <view class="order_no" v-if="orderInfo.orderStatus===30">已完成</view>
        <view class="order_no" v-if="orderInfo.orderStatus===40">售后</view>
      </view>
      <view class="order_info_box df justify-between item-bottom-border">
        <view class="order_info_left">订单类型</view>
        <view class="order_no" v-if="orderInfo.deliveryType==='DOOR_SERVICE'">预约上门</view>
        <view class="order_no" v-if="orderInfo.deliveryType==='LOGISTICS_PICKUP'">物流到店</view>
        <view class="order_no" v-if="orderInfo.deliveryType==='WARDROBE_DELIVERY'">衣柜到店</view>
        <view class="order_no" v-if="orderInfo.deliveryType==='IN_STORE'">到店订单</view>
      </view>
      <!--      根据订单类型显示不同的订单信息-->
      <block v-if="orderInfo.deliveryType==='DOOR_SERVICE'">
        <view class="order_info_box df justify-between item-bottom-border"  v-if="orderInfo.deliveryType==='DOOR_SERVICE'">
          <view class="order_info_left">上门时间</view>
          <view class="order_no">{{orderInfo.serviceTime}}</view>
        </view>

      </block>
      <block v-if="orderInfo.deliveryType==='LOGISTICS_PICKUP'">
        <view class="order_info_box df justify-between item-bottom-border"  >
          <view class="order_info_left">物流信息</view>
          <view class="order_no">{{orderInfo.shippingLogistics}} {{orderInfo.trackingNumber}} </view>
        </view>
      </block>
      <block v-if="orderInfo.deliveryType==='WARDROBE_DELIVERY'">
        <view class="order_info_box df justify-between item-bottom-border"  v-if="orderInfo.deliveryType==='DOOR_SERVICE'">
          <view class="order_info_left">衣柜类型</view>
          <view class="order_no">{{orderInfo.serviceTime}}</view>
        </view>
      </block>
      <view class="order_info_box df justify-between">
        <view class="order_info_left">联系方式</view>
        <view class="order_no">
          <view>{{orderInfo.deliveryAddress}}</view>
          <view>{{orderInfo.userName}}  {{orderInfo.userPhone}}</view>

        </view>
      </view>


    </view>
    <!--    待支付的时候不存在洗护的流程-->
    <view class="order_info_wrap mgt-24" >
      <view class="order_info_box df justify-between ">
        <view class="order_info_left">售后流程</view>
        <view class="order_no">待上门</view>
      </view>
    </view>
<!--    处理结果-->
    <view class="special-explanation mgt-24">
      <view class="title">拒绝原因</view>
      <view class="exp-cont">
        {{orderInfo.specialNote}}
      </view>
      <view class="img-vessel">
        <template v-if="orderInfo.imageUrls">
          <image v-for="(item,index) in orderInfo.imageUrls.split(',')" :src="item" :key="index" mode=""></image>
        </template>
      </view>
    </view>

    <view class="logistics_wrap" v-if="orderInfo.deliveryType==='LOGISTICS_PICKUP'">

      <view class="logistics-box">
        <view class="logistics-title">物流信息</view>
        <view class="logistics-item">
          <view class="logistics-status">已签收派送中</view>
          <view class="logistics-desc">
            您的快件已由【家门口】代收，快递员:陈林，联系电话:15672297577，营业部电话:17688632618，感谢您使用京东物流，期待再次为您服务。
          </view>
          <view class="logistics-time">2025-04-20 18:36</view>
        </view>
        <view class="logistics-item">
          <view class="logistics-status">派送中</view>
          <view class="logistics-desc">
            您的快件正在派送中，请您准备签收(快递员:陈林，联系电话:15672297577，营业部电话:17688632618)。京东已开启“号码保护”，您的电话隐私不会被泄露，请放心接听！
          </view>
          <view class="logistics-time">2025-04-20 17:40</view>
        </view>
      </view>
    </view>
    <view class="card_wrap mgt-24 ">
      <view class="order-shop">
        <view class="shop_info df" v-if="orderInfo.storeBriefDetailsVo">
          <text class="shop_name" >{{orderInfo.storeBriefDetailsVo.storeShortName}}</text>
          <view class="tag">店铺</view>
        </view>
        <view class="shop_address mgt-20 mgb-20" v-if="orderInfo.storeBriefDetailsVo">{{orderInfo.storeBriefDetailsVo.storeLocation}}</view>
        <view class="goods_list">
          <view
            class="goods-item df mgb-15"
            v-for="(item, index) in orderInfo.hemaOrderItemBriefVos"
            :key="index"
          >
            <image
              class="goods-image"
              :src="item.clothingTypeImages"
              mode="aspectFill"
            ></image>
            <view class="goods-detail_wrap flex1 mgl-24 mgt-24">
              <view class="goods-detail df flex-jc-sb">
                <view class="goods-name df">
                  <text>{{ item.clothingType }}</text>
                  <view class="flex1 mgl-15 ">
                    <up-tag class="mgb-15"  size="mini" text="反洗原因" type="primary" @click="handleReason(item)" > </up-tag>
                    <up-tag class="mgb-15" v-if="item.accessoryFee>0"  size="mini" :text='`附加费用${item.accessoryFee}`' type="info"  > </up-tag>
                    <up-tag class="mgb-15" v-if="item.urgentFee>0"  size="mini" :text='`加急费用${item.urgentFee}`' type="info"  > </up-tag>
                  </view>
                </view>
                <view class="goods-type">¥{{ item.price }}</view>
              </view>
              <view class="goods-price df flex-jc-sb mgt-12">
                <view class="price-symbol df">
                  <text>{{item.washingMethod}}</text>
                  <view class="flex1 mgl-15" v-if="item.garmentRemark">
                    <up-tag class="mgr-15" v-for="(self,i) in item.garmentRemark.split(',')" :key="i" :text="self" plain size="mini" > </up-tag>
                  </view>
                </view>
                <text class="price-value">x{{ item.count }}</text>
              </view>
            </view>


          </view>
          <!--        订单的详情-->
        </view>

        <view class="total_wrap df flex-jc-sb ">
          <view class="total_text">申请返洗件数</view>
          <view class="total_number">
            <text>¥</text>
            <text>{{orderInfo.totalAmount}}</text>
          </view>
        </view>
      </view>
    </view>

    <view style="height: 300rpx"></view>
    <view class="order-summary" v-if="orderInfo.orderStatus ===10">
      <view class="mid flex-center-between">
        <view class="flex-a-center">
          待支付<text>￥{{orderInfo.totalAmount}}</text><view class="line"></view>
          <!--          <view class="flex-aj-center" @tap="isDetail=!isDetail">-->
          <!--            明细<view class="triangle"></view>-->
          <!--          </view>-->
        </view>
        <view class="order-summary-btn" >
          <main-button :width="'168rpx'" :height="'70rpx'" :isGradient="false" :margin="'0'" :color="'#0080FF'" :borderColor="'#0080FF'" @click="orderConfirm">下单</main-button>
        </view>
      </view>
      <view class="bottom flex-a-center">
        <view @tap="radioActive = !radioActive">
          <single-select :selectShow="radioActive" :scale="'scale(0.66)'" :borderColor="'#999'"></single-select>
        </view>
        阅读并同意
        <view @click="goPingTai">
          《平台洗涤条款》
        </view>
        <view @click="goToStore">
          《店铺洗护风险须知》
        </view>
      </view>
    </view>
    <view class="order-summary" v-if="orderInfo.orderStatus ===20">
      <view class="mid flex-center-between">
        <view class="flex-a-center">
          <block v-if="orderInfo.supplementStatus=='PENDING_PAYMENT'">
            待补款费用<text>￥{{orderInfo.supplementAmount}}</text><view class="line"></view>
          </block>

        </view>
        <view class="order-summary-btn" style="display: flex">
          <main-button @click="handlePost" v-if="orderInfo.supplementStatus=='PENDING_PAYMENT'"  :width="'168rpx'" :height="'70rpx'" :fontSize="'28rpx'" :margin="'0 16rpx 0 16rpx'" >差价确认</main-button>
          <main-button :width="'168rpx'" v-if="orderInfo.signStatus=='TO_BE_SIGNED'"  :height="'70rpx'" :isGradient="false" :margin="'0'" :color="'#0080FF'" :borderColor="'#0080FF'" @click="handleSignFor">确认签收</main-button>
        </view>
      </view>
      <view class="bottom flex-a-center">

      </view>
    </view>
    <view class="order-summary" v-if="orderInfo.orderStatus ===30">
      <view class="mid flex-center-between">
        <view class="flex-a-center">
          <!--          待支付<text>￥200</text><view class="line"></view>-->
        </view>
        <view class="order-summary-btn" style="display: flex">
          <main-button @click="goJumpAfterService(orderInfo)"  :width="'168rpx'" :height="'70rpx'" :fontSize="'28rpx'" :margin="'0 16rpx 0 16rpx'" >售后</main-button>
          <main-button :width="'168rpx'" :height="'70rpx'" :isGradient="false" :margin="'0'" :color="'#0080FF'" :borderColor="'#0080FF'" @click="show=true">评价</main-button>
        </view>
      </view>
      <view class="bottom flex-a-center">

      </view>
    </view>
    <view class="order-summary" v-if="orderInfo.orderStatus ===40">
      <view class="mid flex-center-between">
        <view class="flex-a-center">
          <!--          待支付<text>￥200</text><view class="line"></view>-->
        </view>
        <view class="order-summary-btn" style="display: flex">
          <!--          <main-button  :width="'168rpx'" :height="'70rpx'" :fontSize="'28rpx'" :margin="'0 16rpx 0 16rpx'" >售后</main-button>-->
          <main-button :width="'168rpx'" :height="'70rpx'" :isGradient="false" :margin="'0'" :color="'#0080FF'" :borderColor="'#0080FF'" @click="orderConfirm">联系商家</main-button>
        </view>
      </view>
      <view class="bottom flex-a-center">

      </view>
    </view>
    <up-popup :show="showReason" mode="bottom" :round="10" @close="close" @open="open" :closeable="true">
      <view class="content_popup">
        <view class="content_title">反洗原因</view>
        <view class="content_input_wrap mgt-30">
          <up-textarea disabled v-model="washbackReason" placeholder="请添加返洗原因" border="none"  style="background-color:#f3f3f5;"></up-textarea>
          <z-upload-image limit="6" disabled v-model:files="specialPic" action-type="custom">
            <view class="img-upload">
              <view class="img-item flex-aj-center">
                <view class="side">
                  <view class="side"></view>
                </view>
              </view>
            </view>
          </z-upload-image>
        </view>
        <main-button :color="'#fff'" :margin="'40rpx 0 0'" @click="confirmReason">确认</main-button>

      </view>
    </up-popup>
  </view>
</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app';
import {customerQryOrderDetails} from '@/api/cleaningOrder'
import {customerReviewOrder} from "@/api/pagesMy/user.js"
import {commonStore} from '../../stores/common'
import {agreementGetAgreementTitle, protocolDetail} from '../../api/cleaningOrder'
import {useCustomStores} from '@/utils/hook'
import {customerConfirmReceipt, customerPriceConfirm} from '../../api/pagesMy/user'
import {setPlay} from '../../utils/common'

const CommonStore = commonStore()
const {ShopStore,userStore} = useCustomStores()
const {userInfo} = userStore
const state= reactive({
  orderId:'',
  orderInfo:{},
  form:{
    logisticsScore:1,
    serviceScore:1,
    washingScore:1,
    content:"",
    images:""
  }
})

const num = ref(3);
const show = ref(false);
const showReason = ref(false)
const radioActive = ref(false)
const loadDetails =()=>{
  customerQryOrderDetails(state.orderId).then(res=>{
    console.log('res',res)
    state.orderInfo = res
  })
}
const {orderInfo,form} =toRefs(state)
function  handlePreviewImage(img){
  if(!img){
    uni.showToast({
      title: '暂无图片',
      icon: 'none'
    })
    return
  }
  uni.previewImage({
    urls: img.split(','),
    current: img.split(',')[0]
  })
}
/*****这里订单待支付的情况处理************/
function orderConfirm(){
  if(!radioActive.value){
    uni.showToast({
      title:"请勾选协议",
      icon:'none'
    })
    return
  }
  ShopStore.setPlaceOrderInfo({
    storeId:orderInfo.value.storeId,
    orderNo:orderInfo.value.orderId,
    categories:orderInfo.value.hemaOrderItemBriefVos.map(item=>{
      return{
        ...item,
        "washType": "STORE_WASH",
      }
    }),
  })
  uni.navigateTo({
    url: '/pagesMy/user/pay?type=shopOrder&totalPrice='+orderInfo.value.totalAmount
  })
}
function close(){
  show.value = false
  showReason.value =  false
}
function handlePost(){
  customerPriceConfirm({
    orderId:orderInfo.value.orderId,
    action:"PRICE_CONFIRM",
    tradeType:"PRICE_CONFIRM",
    price:orderInfo.value.supplementAmount,
  }).then(res=>{
    setPlay(res,()=>{
      uni.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 2000
      })
      loadDetails()
    })
  })

}
function handleSignFor(){
  customerConfirmReceipt({
    orderId:orderInfo.value.orderId,
    action:"CONFIRM_RECEIPT"
  }).then(res=>{
    uni.showToast({
      title: '确认收货成功',
      icon: 'success',
      duration: 2000
    })
    loadDetails()

  })
  // console.log(item,index)
}
function goJumpAfterService(item){
  uni.navigateTo({
    url:"/pagesShop/afterService/index?orderId="+item.orderId
  })
}
function submitRate(){
  let images =[]
  if(form.value.images){
    images =form.value.images.split(',')
  }else {
    images =[]
  }
  customerReviewOrder({
    orderId:orderInfo.value.orderId,
    userId:userInfo.userId,
    shopId:orderInfo.value.storeId,
    ...form.value,
    images,
  }).then(res=>{
    show.value = false
    uni.showToast({
      title: '评价成功',
      icon: 'none',
      duration: 2000
    })
  })
}
//平台
function goPingTai(){
  agreementGetAgreementTitle().then(res=>{
    CommonStore.setRichText({
      ...res,
      title:res.agreementTitle,
      content:res.agreementContent
    })
    uni.navigateTo({
      url: '/pagesInfo/web/commonAgreement'
    })
  })
}
function  goToStore(){
  protocolDetail(orderInfo.value.storeId).then(res=>{
    CommonStore.setRichText({
      ...res,
      title:res.protocolName,
      content:res.protocolContent
    })
    uni.navigateTo({
      url: '/pagesInfo/web/commonAgreement'
    })
  })
}
const handleReason =(item)=>{
  showReason.value = true
}
onLoad((options)=>{
  state.orderId = options.orderId
  if(options.isOpen){
    show.value = true
  }
  // loadDetails()
})
onShow(()=>{
  setTimeout(()=>{
    loadDetails()
  },200)

})
</script>

<style lang="scss" >
@import "./style/common.scss";
.order_details{
  box-sizing: border-box;
  width: 100%;
  padding: 0 32rpx;
  .order_info_wrap{
    box-sizing: border-box;
    width: 100%;
    padding: 0 32rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    .order_info_box{
      padding: 32rpx;
      .order_info_left{
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }
      .order_no{
        font-weight: 400;
        font-size: 28rpx;
        color: #444444;
      }

    }
  }
  .card_wrap{
    box-sizing: border-box;
    width: 100%;
    //padding: 0 24rpx;
    .order-shop{
      width: 100%;
      box-sizing: border-box;
      padding: 0 24rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      .shop_info{
        padding-top: 20rpx;
        width: 100%;
        .shop_name{
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }
        .tag{
          margin-left: 10rpx;
          padding: 5rpx 8rpx;
          background: #0080FF;
          border-radius: 6rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
      .shop_address{
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }
      .goods_list{
        border-top: 1rpx solid #E5E5E5;
        //border-bottom: 1rpx solid #E5E5E5;
        padding-top: 20rpx;
        width: 100%;
        .goods-item{
          .goods-image{
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
            //background-color: #f5f5f5;
            flex-shrink: 0;
          }
          .goods-detail{
            .goods-name{
              font-size: 32rpx;
              color: #333333;
            }
            .goods-type{
              font-size: 32rpx;
              color: #333333;
            }
          }
          .goods-price{
            .price-symbol{
              font-size: 32rpx;
              color: #999999;
            }
            .price-value{
              font-size: 32rpx;
              color: #999999;
            }
          }
        }
        .goods_bottom{
          margin-bottom: 20rpx;
          .goods_lab_wrap{

          }
          .goods_bottom_right{
            font-size: 32rpx;
            color: #333333;
            .total-price{
              font-size: 32rpx;
              color: #ff3333;
            }
          }
        }

      }
      .goods_btn_wrap{
        width: 100%;
        padding: 30rpx 0;
      }
      .price-details{
        margin-top: 20rpx;
        border-bottom: 1rpx solid #E5E5E5;
        width: 100%;
        .price-item{
          margin-bottom: 20rpx;
          .price-label{
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
          .price-value-container{
            font-size: 28rpx;
            color: #999999;
            .price-discount{
              color: #D22C14;
            }
          }
        }

      }
      .total_wrap{
        padding: 24rpx 0;
        .total_text{
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
        .total_number{
          font-weight: bold;
          font-size: 28rpx;
          color: #D22C14;
        }
      }
    }

  }

}
.special-explanation{
  //margin: 0;
  margin: 24rpx 0  0 0 ;
  box-sizing: border-box;
  width: 100%;
  border-radius: 16rpx;
  padding: 24rpx;
  background-color: #fff;
  .title{
    color: #000;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .bottom{
    display: flex;
    //flex-wrap: wrap;
  }
  .imgs-box{
    min-width: 148rpx;
    max-width: 500rpx;
    min-height: 148rpx;
    border-radius: 16rpx;
    .z-upload-image{
      display: flex;
      flex-wrap: wrap;
    }
    .z-image-item {
      width: 148rpx;
      height: 148rpx;
      border-radius: 16rpx;
      margin: 5rpx;
    }
  }
  .img-vessel{
    image{
      width: 148rpx;
      height: 148rpx;
      margin: 0 11rpx 6rpx 0;
    }
  }
  .imgs{
    width: 148rpx;
    height: 148rpx;
    border-radius: 16rpx;
    background-color: #F1F1F1;
    border: 1rpx dashed #999;
    font-size: 24rpx;
    color: #999;
    image{
      width: 30rpx;
      height: 25rpx;
      margin-bottom: 12rpx;
    }
  }
  .description{
    flex: 1;
    //width: 466rpx;
    height: 148rpx;
    border-radius: 16rpx;
    background-color: #F1F1F1;
    padding: 16rpx;
    position: relative;
    margin: 5rpx 0 5rpx 17rpx;;
    .txtarea{
      width: 450rpx;
      height: 135rpx;
      font-size: 24rpx;
      color: #999;
      overflow: hidden;
    }
    .subscript{
      position: absolute;
      bottom: 16rpx;
      right: 16rpx;
      z-index: 2;
    }
  }
}
.color_red{
  color:#df273e ;
}
.content_popup{
  box-sizing: border-box;
  width: 100%;
  padding: 32rpx;
  min-height: 600rpx;
  .content_title{
    width: 100%;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
  }
  .content_input_wrap{
    box-sizing: border-box;
    width: 100%;
    min-height: 300rpx;
    background-color: #f3f3f5;
    border-radius: 20rpx;
    padding:  32rpx;

  }

}


.img-upload{
  position: relative;
  image{
    width: 132rpx;
    height: 132rpx;
    border-radius: 20rpx;
    background-color: #ccc;
    margin-right: 20rpx;
  }
  .img-item{
    width: 132rpx;
    height: 132rpx;
    border-radius: 20rpx;
    border: 2rpx dashed #ccc;
    color: #ccc;
    font-size: 80rpx;
    font-weight: lighter;
    .side{
      width: 37rpx;
      height: 2.5rpx;
      background-color: #ccc;
      .side{
        width: 37rpx;
        height: 2.5rpx;
        background-color: #ccc;
        transform: rotateZ(90deg);
      }
    }
  }
}
.evaluate{
  .evaluate-item{
    display: flex;
    align-items: center;
    margin: 18rpx 0;
    text.left{
      color: #222;
      margin-right: 47rpx;
    }
    text.right{
      color: #999;
      margin-left: 34rpx;
    }
  }
}
::v-deep .z-upload-image_grid{
  display: flex!important;
  flex-wrap: wrap;
}
.z-upload-image{
  display: flex!important;
  flex-wrap: wrap;
}
.z-image-item {
  width: 132rpx!important;
  height: 132rpx!important;
  border-radius: 16rpx;
  margin: 5rpx 8rpx;
}
.logistics_wrap {
  margin-top: 24rpx;
  .logistics-title {
    font-weight: bold;
    margin-bottom: 12rpx;
    font-size: 30rpx;
    color: #222;
  }
  .logistics-box {
    background: #fff;
    padding: 20rpx 24rpx;
    border-radius: 12rpx;
  }
  .logistics-item {
    margin-bottom: 18rpx;
    &:last-child { margin-bottom: 0; }
  }
  .logistics-status {
    font-weight: bold;
    color: #222;
    margin-bottom: 6rpx;
    font-size: 28rpx;
  }
  .logistics-desc {
    color: #333;
    font-size: 26rpx;
    line-height: 1.6;
  }
  .logistics-time {
    color: #999;
    font-size: 24rpx;
    margin-top: 4rpx;
  }
}
</style>
